<%--
  Created by IntelliJ IDEA.
  User: FENG1
  Date: 2022-05-27
  Time: 8:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title>展示所有订单信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="static/component/pear/css/pear.css" rel="stylesheet" />
    <style>
        table td{
            font-size: 22px;
            font-weight: bolder;
        }
    </style>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" >
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">订单编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="saleOrderCode" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="userFormSubmit"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                        <div class="layui-inline">
                            <button type="reset" class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
<table class="layui-table" id="tableOut" lay-filter="tableOut"></table>
<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['jquery', 'laydate', 'util', 'layer', 'table', 'form'], function ($, laydate, util, layer, table, form) {
        $(".layui-table-click").click(function(){
            $(this).children(".table-item").siblings().hide();
        })
        // 假释真的需要默认点击搜索在下面table render过之后再调用$dom.click()即可
        //监听工具条
        table.on('tool(tableOut)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            // 异常不要用它原来的这个作为tr的dom
            // var tr = obj.tr; //获得当前行 tr 的DOM对象
            var $this = $(this);
            var tr = $this.parents('tr');
            var trIndex = tr.data('index');
            if (layEvent === 'addRowTable') {

                // 外围的table的id + tableIn_ + 当前的tr的data-index-weight
                $(this).attr('lay-event', 'fold').html('-');
                var tableId = 'tableOut_tableIn_' + trIndex;
                var _html = [
                    '<tr class="table-item">',
                    '<td colspan="' + tr.find('td').length + '" style="padding: 6px 12px;">',
                    '<table id="' + tableId + '"></table>',
                    '</td>',
                    '</tr>'
                ];
                tr.after(_html.join('\n'));
                // 渲染table
                table.render({
                    elem: '#' +tableId,
                    url:"saleOrderD/allsaleOrderD?saleOrderId="+data.saleOrderId,
                    cols: [[
                        {field:'goodsId', title: '商品编号'},
                        {field:'goodsName', title: '商品名称'},
                        {field:'goodsCount', title: '购买数量'},
                        {field:'goodsPrice', title: '商品价格',templet:function (data) {
                                return data.goodsPrice+'  元'}},
                        {field:'goodsstotlePrice', title: '商品小计',templet:function (data) {
                                return data.goodsstotlePrice+'  元'}}
                    ]],
                });
                // $(window).resize();
            } else if (layEvent === 'fold') {
                $(this).attr('lay-event', 'addRowTable').html('+');
                tr.next().remove();
            }
        });
        var tableIns = table.render({
            elem: '#tableOut',
            url: 'saleOrder/allSaleOrder',
            method:'post',//规定请求方式
            page:true,//开启分页
            limits:[1,10,15,20],//指定每页显示数
            check:true,
            even:true,//隔行变色
            cols: [[
                {field: 'btn', width: 50, align: 'center', templet: function (d) {return '<a style="width: 100%; font-weight: bolder;font-size:22px!important;  height: 100%;cursor: pointer;" lay-event="addRowTable">+</a>'}},
                {field: 'saleOrderCode', title: '订单编号',align: 'center',style:'color:red;'},
                {field: 'paymanner', title: '支付方式',align: 'center'},
                {field: 'createDate', title: '结账时间',align: 'center',sort: true},
                {field: 'saleCopePrice', title: '应付金额',align: 'center',sort: true,templet:function (data) {
                        return data.saleCopePrice+'  元'}},
                {field: 'salePaidPrice', title: '实付金额',align: 'center',templet:function (data) {
                        return data.salePaidPrice+'  元'}},
                {field: 'salePrePrice', title: '优惠金额',align: 'center',templet:function (data) {
                        return data.salePrePrice+'  元'}},
                {field: 'saleGoodsCount', title: '购买件数',align: 'center',sort: true ,templet:function (data) {
                        return data.saleGoodsCount+'  件'}}
            ]],
        });
        //from表单提交事件
        form.on('submit(userFormSubmit)',function (data){
            //执行搜索重载
            table.reload('tableOut',{
                //规定默认第几页
                page:{
                    curr:1
                },
                where:{
                    //添加请求参数
                    saleOrderCode:data.field.saleOrderCode,
                }
            });
            return false;
        })
        table.on('sort(tableOut)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('tableOut', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
        });
    });
</script>
</body>
</html>
